<template>
	<view>
		<view class="flex-around ml-list">
			<view v-for="(item,index) in lines" :key="index" class="ml-item">

				<view v-if="titleP&&titleP==item.text"
					style="background: #D6F0FF;filter: blur(36rpx);width: 100%;height: 100%;position: absolute;bottom: 0;left: 0;"
					:style="{height:((isAnimation ? item.height : item.height * 2)+100)+'rpx'}"></view>
				<view class="ml-line"
					:style="{height:(isAnimation ? item.height : item.height * 2)+'rpx',background:item.background}"
					v-if="isAnimation"></view>
				<view class="ml-line-box" v-else>
					<image :src="default_wh_pay" mode="" class="default-wh-pay" v-if="isShowWh"></image>
					<view class="ml-i-score" v-else>{{item.height}}%</view>
					<view class="ml-line-stop"
						:style="{height:((isAnimation ? item.height : item.height * 2)||1)+'rpx',background:item.background}">
					</view>
				</view>
				<view class="ml-bottom-text">
					<view class="ml-text">{{item.text}}</view>
					<view class="ml-text-e">{{item.textE}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "mai-lun-loading",
		props: ['lineList', 'isAnimation', 'titleP', 'isShowWh'],
		data() {
			return {
				lineHeight: 80,
				lines: [],
				intervalObj: null,
				default_wh_pay: this.$imgWxkjUrl + '/product/afterPay/default_wh_pay.png',
			};
		},
		created() {
			this.lines = JSON.parse(JSON.stringify(this.lineList));
			console.log(this.lines, '什么鬼')
			if (this.isAnimation) {
				let height = 0;
				let flag = true;
				this.intervalObj = setInterval(() => {
					if (height >= 120) {
						flag = false;
					}
					if (height <= 0) {
						flag = true;
					}
					if (flag) {
						height += 20;
					} else {
						height -= 20;
					}
					let item1 = this.lines[0];
					item1.height = height * 2;

					let item2 = this.lines[1];
					item2.height = height

					let item3 = this.lines[2];
					item3.height = height

					let item4 = this.lines[3];
					item4.height = height * 2

					let item5 = this.lines[4];
					item5.height = height

					let item6 = this.lines[5];
					item6.height = height * 2

					let item7 = this.lines[6];
					item7.height = height


					this.$set(this.lines, 0, item1)
					this.$set(this.lines, 1, item2)
					this.$set(this.lines, 2, item3)
					this.$set(this.lines, 3, item4)
					this.$set(this.lines, 4, item5)
					this.$set(this.lines, 5, item6)
					this.$set(this.lines, 6, item7)
				}, 100)
			}
			setTimeout(() => {
				clearInterval(this.intervalObj);
			}, 5000)
		},
		methods: {

		},
		destroyed() {
			console.log('什么鬼什么鬼什么鬼什么鬼什么鬼')
			if (this.intervalObj) {
				clearInterval(this.intervalObj);
			}
		}
	}
</script>

<style>
	.default-wh-pay {
		width: 51rpx;
		height: 30rpx;
		display: block;
		margin: 0 auto;
	}

	.ml-i-score {
		width: 100%;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		letter-spacing: 2rpx;
		text-align: center;
	}

	.ml-bottom-text {
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 100%;
	}

	.ml-text-e {
		width: 100%;
		text-align: center;
		font-weight: bold;
		font-size: 19rpx;
		color: #FFFFFF;
		letter-spacing: 1rpx;
		margin-top: 6rpx;
	}

	.ml-text {
		width: 100%;
		font-weight: bold;
		font-size: 26rpx;
		color: #FFFFFF;
		letter-spacing: 2rpx;
		text-align: center;
	}

	.ml-list {
		width: 100%;
	}

	.ml-item {
		width: 100%;
		height: 378rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.ml-line {
		width: 53rpx;
		height: 79rpx;
		background: linear-gradient(180deg, #FFBBC1 0%, #EB1F2D 100%);
		border-radius: 4rpx 4rpx 0px 0px;
		position: absolute;
		left: 50%;
		bottom: 80rpx;
		transform: translateX(-50%);
	}

	.ml-line-stop {
		width: 53rpx;
		height: 79rpx;
		background: linear-gradient(180deg, #FFBBC1 0%, #EB1F2D 100%);
		border-radius: 4rpx 4rpx 0px 0px;
		margin: 0 auto;
		margin-top: 6rpx;
	}

	.ml-line-box {
		position: absolute;
		left: 50%;
		bottom: 80rpx;
		transform: translateX(-50%);
	}
</style>